import React, { PureComponent } from "react"

export class App extends PureComponent {
    constructor() {
        super()
        this.state = {
            username: "",
            password: "",
            isAgree: false,
            hobbies: [
                {
                    value: "sing",
                    isChecked: false,
                    text: "唱",
                },
                {
                    value: "dance",
                    isChecked: false,
                    text: "跳",
                },
                {
                    value: "rap",
                    isChecked: false,
                    text: "rap",
                },
            ],
            fruit: ["apple", "orange"],
        }
    }
    handleSubmitClick(e) {
        // 1.阻止默认的行为
        e.preventDefault()
        // 2.获取到所有表单数据，对数据进行组件
        console.log(this.state)
        const hobbies = this.state.hobbies
            .filter((item) => item.isChecked)
            .map((item) => item.value)
        console.log(hobbies)
        // 3.以网络请求的方式，将数据传递给服务器
    }
    handleChangeInput(e) {
        this.setState({
            // 计算属性名 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Object_initializer#
            [e.target.name]: e.target.value,
        })
    }

    handleAgreeCheck(e) {
        console.log(e.target.checked)
    }
    componentDidUpdate() {
        const { username, password } = this.state
        console.log(username, password)
    }

    handleHobbiesChange(e, index) {
        console.log(e.target.name)
        const hobbies = [...this.state.hobbies]
        hobbies[index].isChecked = e.target.checked
        this.setState({
            hobbies: hobbies,
        })
    }

    handleFruitChange(e) {
        // console.log(e.target.selectedOptions)
        // const options = Array.from(e.target.selectedOptions)
        // const values = options.map((item) => item.value)
        // this.setState({ fruit: values })

        const values = Array.from(e.target.selectedOptions, (item) => item.value)
        this.setState({ fruit: values })
    }

    render() {
        const { username, password, isAgree, hobbies, fruit } = this.state

        return (
            <div>
                <form onSubmit={(e) => this.handleSubmitClick(e)}>
                    用户名：
                    <input
                        type="text"
                        name="username"
                        onChange={(e) => this.handleChangeInput(e)}
                        value={username}
                    />
                    密码：
                    <input
                        type="password"
                        name="password"
                        onChange={(e) => this.handleChangeInput(e)}
                        value={password}
                    />
                    <input
                        type="checkbox"
                        name="agree"
                        value={isAgree}
                        onChange={(e) => this.handleAgreeCheck(e)}
                    />
                    {/* 多选 */}
                    <div>
                        爱好：
                        {hobbies.map((item, index) => {
                            return (
                                <div key={item.text}>
                                    <input
                                        type="checkbox"
                                        checked={item.isChecked}
                                        onChange={(e) => this.handleHobbiesChange(e, index)}
                                    />
                                    <span>{item.text}</span>
                                </div>
                            )
                        })}
                    </div>
                    {/* select */}
                    <select
                        value={fruit}
                        onChange={(e) => this.handleFruitChange(e)}
                        multiple="multiple"
                    >
                        <option value="apple">苹果</option>
                        <option value="orange">橘子</option>
                        <option value="banana">香蕉</option>
                    </select>
                    <button type="submit">注册</button>
                </form>
            </div>
        )
    }
}

export default App
